<template>
	<view class="content">
		<u-navbar :is-back="false" title="商品选择"
		  title-size="30"
		  :background="{background:'#2B88FE' }"
		  title-color="#fff">
		  <div class="head_icon">
		    <u-icon @click="$api.handleBackTo"
		      name="arrow-left" color="#fff"
		      size="36">
		    </u-icon>
		    <u-icon @click="$api.handleHomeTo"
		      name="home" color="#fff" size="36">
		    </u-icon>
		  </div>
		</u-navbar>
		
		<u-sticky style="height: 110upx;" bg-color="#F8F9FC">
			<view class="topsearch fff">
				<view class="search">
					<u-search placeholder="请输入搜索产品名称" @change="keywordChange" :show-action="false" height="70" v-model="keyword"></u-search>
				</view>
			</view>
		</u-sticky>
		<view style="background: #f8f8f8; height:16upx ;"></view>
		<view class="goodslsit" v-for="(li,index) in clist" :key="index" @click="selectGood(li,index)">
			<view class="x-row">
				<image :src="li.avatar" class="imgwid"></image>
				<view class="x-col righttext">
					<view class="titel">{{li.gname}}</view>
					<view class="x-row">
						<view v-if="!sore" class="x-col x-col-center textre">
							商家库存：{{li.stock}}
						</view>
						<view v-if="!sore" class="x-col x-col-center textre">
							商品库存：{{li.stock}}
						</view>
						<!-- <view class="x-col-center" v-if="change">
							<u-number-box v-model="li.stock" @change="valChange" :index="index"></u-number-box>
						</view> -->
					</view>
					<view class="textre">到期时间：{{li.ex_time}}</view>
				</view>
				<view class="addBox " :class="li.is_zk?'sed':''" v-if="sore=='add'">

					<text v-if="li.is_zk" class="iconfont icongou"></text>
					<text v-else class="iconfont iconjia"></text>
					<text>添加</text>
				</view>
			</view>
		</view>
		<u-empty mode="data" margin-top="100" v-if="clist.length==0"></u-empty>
		<u-loadmore margin-bottom="130" marginTop="130" bg-color="#ffffff" v-if="clist.length>0" :status="status" />
		<block v-if="sore=='add'">
			<view :style="{height:height}"></view>
			<view class="viewbbutton" :style="{height:height}">
				<view class="sendBomBtn" @click="suceAdd">确认添加</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: this.but_height(),
				query: 0,
				keyword: "",
				idx: '',
				bid: '',
				action: '',
				sore: '', //add 添加客户时选择商品
				change: false,
				clist: [],
				isAllList: 1,
				page: 1,
				status: 'loading',
				loading: true,
				current: 0,
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: '选择商品',
			})
			if (e.query) {
				this.query = e.query
			}
			this.idx = e.idx;
			this.bid = e.bid;
			this.action = e.action ? e.action : '';
			this.current = e.current ? e.current : 0;
			this.change = e.isOld ? true : false;
			this.sore = e.sore ? e.sore : '',
				this.getClist()
		},
		onReachBottom() {
			if (this.isAllList != 0 && this.sore == 'add') {
				this.getClist();
			}
		},
		methods: {
			suceAdd() {
				let li = this.clist,
					ary = [];
				for (let i in li) {
					if (li[i].is_zk)
						ary.push({
							gid: li[i].gid,
							gname: li[i].gname,
							price: this.current == 1 ?li[i].sall_price : li[i].price,
							stock: li[i].stock,
							ex_time:li[i].ex_time,
							maxnum: li[i].stock,
							num:1,
							// sall_price: li[i].sall_price,	
							isPush: li[i].isPush,
							remarks: '',
							type:0,//1 换货，添加换货商家 id 2，折价 自动计算提交的price 价格
							zhe:'',//折扣比例
							remarks:'',
							bid:'',
							bname:''
						})
				}
				if (ary.length == 0) {
					uni.showToast({
						title: "请选择添加的商品",
						icon: "none"
					})
					return
				}
				getApp().globalData.addCusGoodLi = ary;
				uni.navigateBack()
			},
			defaultData() {
				this.isAllList = 1;
				this.page = 1;
				this.clist = [];
				this.status = 'loading';
				this.loading = true;
			},
			selectGood(e, idx) {
				if (this.sore) {
					this.clist[idx].is_zk = !this.clist[idx].is_zk;
				} else {
					getApp().globalData.selectPushGood = {
						gid: e.gid,
						gname: e.gname,
						price: this.current == 1 ? e.sall_price : e.price,
						ex_time: e.ex_time,
						maxnum: e.stock,
						// sall_price: e.sall_price,
					}
					uni.navigateBack({
						delta: 1
					})
				}
			},
			keywordChange() {
				this.defaultData()
				this.getClist()
			},
			thisChange() {
				this.change = !this.change;
			},
			getClist() {
				let that = this;
				this.$axios(this.action == 'all' ? 'goods/lists' : 'business/businessGoods', {
					bid: this.bid,
					keywords: this.keyword,
					page: this.page,
					limit: getApp().globalData.limit,
				}).then((res) => {
					// that.clist=res.result;
					if (res.result.length == 0) {
						that.isAllList = 0;
						that.status = 'nomore';
					} else {
						var list = that.clist;
						res.result.map(e => {
							// if (that.sore == 'add') {
							// 	e.stock = 0;
							// }
							if(getApp().globalData.addCusGoodLi){
								getApp().globalData.addCusGoodLi.map(g=>{
									if(e.gid==g.gid){
										e.is_zk=true;
										e.isPush=true;
									}
								})
							}
							list.push(e)
						});
						that.clist = list;
						that.page = that.page + 1;
						if(that.action=='all'){
							if (that.clist.length < 20 && that.page == 2 && that.sore == 'add')
								that.getClist();
						}
					}
					if(that.action!='all'){
							that.status = 'nomore';
						
					}
				});
			},
		},
	}
</script>

<style scoped>
	.addBox {
		width: 144rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 32rpx;
		border: 2rpx solid #CCCCCC;
		font-size: 28rpx;
		color: #666666;
		text-align: center;

	}

	.addBox .iconjia {
		font-size: 22rpx;
	}

	.addBox .icongou {
		font-size: 22rpx;
	}

	.sed {
		border: 2rpx solid #2B88FE;
		color: #2B88FE;
	}

	.topsearch {
		padding: 20upx 32upx;
	}

	.goodslsit {
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		padding: 32upx;
	}

	.goodslsit:last-child {
		border-bottom: 0;
	}

	.imgwid {
		width: 144upx;
		height: 144upx;
		display: block;
	}

	.righttext {
		padding-left: 25upx;
	}

	.titel {
		color: #333;
		font-size: 32upx;
		margin-bottom: 15upx;
	}

	.textre {
		color: #666;
		font-size: 28upx;
		padding-top: 5upx;
	}

	.butbox {
		position: fixed;
		bottom: 20upx;
		left: 10%;
		width: 80%;
		height: 85upx;
		background: #007AFF;
		border-radius: 10upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		line-height: 85upx;
	}
</style>
